<!doctype html>
<html lang="en">
  <head>
    <script src="index.js" type="module"></script>
    <script src="../../helpers/header.js" type="module"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container text-center">
      <div class="calculator">
        <output id="display" class="display"></output>

        <button data-value="1" class="btn">1</button>
        <button data-value="2" class="btn">2</button>
        <button data-value="3" class="btn">3</button>
        <button data-value="c" class="btn clear">C</button>

        <button data-value="4" class="btn">4</button>
        <button data-value="5" class="btn">5</button>
        <button data-value="6" class="btn">6</button>
        <button data-value="+" class="btn">+</button>

        <button data-value="7" class="btn">7</button>
        <button data-value="8" class="btn">8</button>
        <button data-value="9" class="btn">9</button>
        <button data-value="-" class="btn">-</button>

        <button data-value="." class="btn">.</button>
        <button data-value="0" class="btn zero">0</button>
        <button data-value="x" class="btn">x</button>

        <button data-value="=" class="btn equals">=</button>
        <button data-value="/" class="btn">/</button>
      </div>
    </div>
  </body>
</html>
